<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <base href="%@">
        <script type="text/ecmascript" defer="defer">
            var scrollToBottomIsNeeded = false;
    
            function appendMessage(html) {
                //Remove any existing insertion point
                insert = document.getElementById("insert");
                if(insert) insert.parentNode.removeChild(insert);
    
                //Append the new message to the bottom of our chat block
                chat = document.getElementById("Chat");
                range = document.createRange();
                range.selectNode(chat);
                documentFragment = range.createContextualFragment(html);
                chat.appendChild(documentFragment);
                alignChat();
            }
            
            function appendNextMessage(html){
                //
                insert = document.getElementById("insert");
            
                //make new node
                range = document.createRange();
                range.selectNode(insert.parentNode);
                newNode = range.createContextualFragment(html);
    
                //swap
                insert.parentNode.replaceChild(newNode,insert);
                alignChat();
            }
            
            function scrollToBottom() {
                document.body.scrollTop = document.body.offsetHeight;
            }
    
            function checkIfScrollToBottomIsNeeded() {
                scrollToBottomIsNeeded = ( document.body.scrollTop >= ( document.body.offsetHeight - ( window.innerHeight * 1.2 ) ) );
            }
    
            function scrollToBottomIfNeeded() {
                if( scrollToBottomIsNeeded )
                    document.body.scrollTop = document.body.offsetHeight;
            }
    
            function setStylesheet( id, url ) {
                code = "<style id=\"" + id + "\" type=\"text/css\" media=\"screen,print\">";
                if( url.length ) code += "@import url( \"" + url + "\" );";
                code += "</style>";
                range = document.createRange();
                head = document.getElementsByTagName( "head" ).item(0);
                range.selectNode( head );
                documentFragment = range.createContextualFragment( code );
                head.removeChild( document.getElementById( id ) );
                head.appendChild( documentFragment );
            }
            document.onclick = imageCheck;
            function imageCheck() {
                node = event.target;
                if(node.tagName == 'IMG' && node.alt) {
                    a = document.createElement('a');
                    a.setAttribute('onclick', 'imageSwap(this)');
                    a.setAttribute('src', node.src);
                    text = document.createTextNode(node.alt);
                    a.appendChild(text);
                    node.parentNode.replaceChild(a, node);
                }
            }
            function imageSwap(node) {
                img = document.createElement('img');
                img.setAttribute('src', node.src);
                img.setAttribute('alt', node.firstChild.nodeValue);
                node.parentNode.replaceChild(img, node);
                alignChat();
            }
            function alignChat() {
                var windowHeight = window.innerHeight;
                if (windowHeight > 0) {
                    var contentElement = document.getElementById('Chat');
                    var contentHeight = contentElement.offsetHeight;
                    if (windowHeight - contentHeight > 0) {
                        contentElement.style.position = 'static';
                        contentElement.style.top = (windowHeight - contentHeight) + 'px';
                    }
                    else {
                        contentElement.style.position = 'static';
                    }
                }
                scrollToBottom();
            }
            window.onresize = alignChat;
    
        </script>
        <style id="mainStyle" type="text/css" media="screen,print">    @import url( "%@" ); </style>
    </head>
    <body onload="alignChat();" style="==bodyBackground==">
        %@
        <div id="Chat">
        </div>
        %@
    </body>
</html>
